<template>
  <div class="flex">
    <el-select v-model="provinceV" placeholder="请选择">
      <el-option
        v-for="item in provinceList"
        :key="item.id"
        :label="item.fullname"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-select v-model="cityV" placeholder="请选择">
      <el-option
        v-for="item in cityList"
        :key="item.id"
        :label="item.fullname"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-select v-model="areaV" placeholder="请选择">
      <el-option
        v-for="item in districtList"
        :key="item.id"
        :label="item.fullname"
        :value="item.id"
      >
      </el-option>
    </el-select>

    <!-- <el-select v-model="townV" placeholder="请选择">
      <el-option
        v-for="item in townList"
        :key="item.id"
        :label="item.fullname"
        :value="item.id"
      >
      </el-option>
    </el-select> -->
  </div>
</template>

<script>
export default {
  name: "SelectAddress",
  props: {
    provinceValue: "",
    cityValue: "",
    areaValue: ""
  },
  data() {
    return {
      // tecentMapKey:'VJJBZ-MA3KS-IZIO3-6SM7A-XGA4E-ASB7R',
      tecentMapKey: "V42BZ-OHRKG-KTUQN-II7YJ-MCEEF-I3BEG",
      tecentMapUrl: "https://apis.map.qq.com/ws/district/v1/getchildren",
      provinceV: "",
      cityV: "",
      areaV: "",

      cityList: [],
      districtList: [],

      provinceList: []

      // townV: "",
      // townList: [],
    };
  },
  watch: {
    provinceValue(v) {
      if (v) {
        this.provinceV = String(v);
      }
    },
    cityValue(v, oldv) {
      if (v) {
        this.cityV = String(v);
      }
    },
    areaValue(v, oldv) {
      if (v) {
        this.areaV = String(v);
      }
    },
    provinceV(v, oldV) {
      if (v && !oldV) {
        this.getCityInfo(v).then(cityRes => {
          this.cityList = JSON.parse(JSON.stringify(cityRes));
        });
      }
      if (v && oldV && v !== oldV) {
        // let cityRes = await that.getCityInfo(formData.province)
        this.getCityInfo(v).then(cityRes => {
          this.cityList = JSON.parse(JSON.stringify(cityRes));
        });
        this.cityV = "";
        this.areaV = "";
      }
    },
    cityV(v, oldV) {
      if (v && !oldV) {
        this.getCityInfo(v).then(cityRes => {
          this.districtList = JSON.parse(JSON.stringify(cityRes));
        });
      }
      if (v && oldV && v !== oldV) {
        // let cityRes = await this.getCityInfo(formData.province)
        this.getCityInfo(v).then(cityRes => {
          this.districtList = JSON.parse(JSON.stringify(cityRes));
        });
        this.areaV = "";
      }
    },
    areaV(v) {
      if (v) {
        let resAddress = this.getAddress();

        this.$emit("getValue", resAddress);
        // let cityRes = await this.getCityInfo(formData.province)
        // this.getAddress();
      }
    }
  },
  created() {
    this.getProvinceList();
    this.initAddressInfo();
  },
  methods: {
    // 初始化地址信息
    initAddressInfo() {
      let provinceV = this.provinceValue;
      let cityV = this.cityValue;

      let areaV = this.areaValue;

      if (provinceV) {
        this.provinceV = provinceV;
        this.getCityInfo(provinceV).then(cityRes => {
          this.cityList = JSON.parse(JSON.stringify(cityRes));
        });
      }
      if (cityV) {
        this.cityV = cityV;
        this.getCityInfo(cityV).then(cityRes => {
          this.districtList = JSON.parse(JSON.stringify(cityRes));
        });
      }
      if (areaV) {
        this.areaV = areaV;
      }
    },

    // 对于获得数据进行处理到 jsonData 中展示
    arrangCityInfo(res) {
      let finalList = [];
      if (res) {
        finalList = res.map(item => {
          let label = item.fullname || item.name;
          let obj = { value: item.id, label };
          return obj;
        });
      }
      return finalList;
    },
    // 获取数据 省市区三级联动数据
    // cityId: 城市Id
    // return:  根据城市编码 获得到的数据，根据 arrangCityInfo 整理出 options 中所需的数组
    getCityInfo(cityId) {
      return new Promise((resolve, reject) => {
        let queryStr = this.tecentMapUrl + "?key=" + this.tecentMapKey;

        if (cityId) {
          queryStr = queryStr + "&id=" + cityId;
        }
        this.$jsonp(queryStr, {
          output: "jsonp",
          "content-type": "application/xml"
        })
          .then(res => {
            let list = res.result[0];
            resolve(list);
          })
          .catch(err => {
            resolve([]);
          });
      });
    },

    // 获取省份列表数据，
    // 放置在 created 生命周期中
    getProvinceList() {
      this.getCityInfo().then(res => {
        let firstRes = res;
        this.provinceList = firstRes;
      });
    },

    // 用以外部获取地址信息
    getAddress() {
      let resObj = {
        provinceV: this.provinceV,
        cityV: this.cityV,
        areaV: this.areaV
      };
      return resObj;
    }
  }
};
</script>

<style></style>
